<template>
	<view class="post-detail-container">
		<!-- 顶部导航栏 -->
		<view class="top-navbar">
			<view class="container-fluid">
				<view class="row align-items-center">
					<view class="col-lg-3 col-md-3 col-sm-12">
						<view class="logo">
							<image src="/static/petLogo.png" mode="aspectFit"></image>
							<text class="titleText">宠物健康管家</text>
						</view>
					</view>
					<view class="col-lg-6 col-md-6 col-sm-12">
						<view class="navbar-center">
							<!-- 分类导航移到这里 -->
							<view class="nav-categories">
								<view class="nav-item" @click="goIndex">
									<text class="titleText">首页</text>
								</view>
								<view class="nav-item" @click="goHealth">
									<text class="titleText">健康</text>
								</view>
								<view class="nav-item" @click="goShop">
									<text class="titleText">商城</text>
								</view>
								<view class="nav-item" @click="goForum">
									<text class="titleText">论坛</text>
								</view>
							</view>
							<!-- 搜索栏缩短 -->
							<view class="search-container">
								<image src="/static/index/search-icon.png" mode="aspectFill"></image>
								<input type="text" placeholder="搜索宠物食品" class="search-input" />
								<button class="search-btn">搜索</button>
							</view>
						</view>
					</view>
					<view class="col-lg-3">
						<view class="user-actions">
							<view class="action-item" @click="goMine">
								<image src="/static/Tabbar/mine.png" style="width: 60rpx;height: 60rpx;"
									mode="aspectFill"></image>
								<text class="titleText">我的账户</text>
							</view>
							<view class="action-item" @click="goShopCar">
								<image src="/static/Tabbar/shop.png" style="width: 60rpx;height: 60rpx;"
									mode="aspectFill"></image>
								<text class="titleText">购物车</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="main-content">
			<!-- 左侧：帖子内容 -->
			<view class="post-content-container" v-if="postDetail">
				<view class="post-header">
					<image :src="avatar" class="user-avatar"></image>
					<view class="user-info">
						<text class="username">{{ username }}</text>
						<text class="post-time">{{ postDetail.createTime }}</text>
					</view>
				</view>

				<view class="post-body">
					<!-- <text class="post-title">{{ postDetail.title }}</text> -->
					<text class="post-content">{{ postDetail.content }}</text>

					<!-- 图片列表 -->
					<!-- <view v-if="postDetail.picture && postDetail.picture.length > 0" class="image-gallery">
					</view> -->
					<image :src="postDetail.picture" class="post-image" mode="aspectFill"></image>
					<!-- <view class="post-interactions">
						<view class="interaction-item" @tap="handleLike">
							<text :class="['icon', {'active': postDetail.isLiked}]">👍</text>
							<text class="count">{{ postDetail.likes ? postDetail.likes : 0 }}</text>
						</view>
						<view class="interaction-item">
							<text class="icon">💬</text>
							<text class="count">{{ postDetail.comments ? postDetail.comments : 0 }}</text>
						</view>
						<view class="interaction-item" @tap="handleCollect">
							<text :class="['icon', {'active': postDetail.isCollected}]">⭐</text>
							<text class="count">{{ postDetail.collects ? postDetail.collects : 0 }}</text>
						</view>
						<view class="interaction-item" @tap="handleShare">
							<text class="icon">📤</text>
							<text class="count">分享</text>
						</view>
					</view> -->
				</view>
			</view>

			<!-- 右侧：评论区 -->
			<view class="comments-section">
				<view class="section-title">
					<text class="title-text">评论 ({{ totalComments }})</text>
				</view>

				<!-- 评论列表 -->
				<view class="comment-list">
					<view v-if="comments.length === 0" class="no-comments">
						<text>暂无评论，快来抢沙发吧~</text>
					</view>

					<view v-for="(comment, index) in comments" :key="comment.id || index" class="comment-item">
						<!-- 一级评论 -->
						<view class="comment-header">
							<image :src="comment.avatar" class="commenter-avatar"></image>
							<view class="commenter-info">
								<text class="commenter-name">{{ comment.username }}</text>
								<text class="comment-time">{{ comment.createTime }}</text>
							</view>
						</view>
						<view class="comment-content" @tap="replyToComment(comment)">
							<text>{{ comment.content }}</text>
						</view>
						<view class="comment-actions">
							<!-- <text @tap="likeComment(comment)" :class="{'liked': comment.isLiked}">
								👍 {{ comment.likes > 0 ? comment.likes : '点赞' }}
							</text> -->
							<text @tap="replyToComment(comment)">回复</text>
						</view>

						<!-- 二级评论 -->
						<view v-if="comment.replies && comment.replies.length > 0" class="reply-list">
							<view v-for="(reply, replyIndex) in comment.replies" :key="reply.id || replyIndex"
								class="reply-item">
								<view class="reply-header">
									<image :src="reply.avatar" class="replier-avatar"></image>
									<view class="replier-info">
										<view class="replier-name-container">
											<text class="replier-name">{{ reply.username }}</text>
											<text class="reply-to" v-if="reply.replyToUsername">回复</text>
											<text class="reply-to-name"
												v-if="reply.replyToUsername">{{ reply.replyToUsername }}</text>
										</view>
										<text class="reply-time">{{ reply.createTime }}</text>
									</view>
								</view>
								<view class="reply-content" @tap="replyToReply(comment, reply)">
									<text>{{ reply.content }}</text>
								</view>
							</view>

							<!-- 查看更多回复按钮 -->
							<view v-if="comment.hasMoreReplies" class="more-replies" @tap="loadMoreReplies(comment)">
								<text>查看更多回复</text>
							</view>
						</view>
					</view>

					<!-- 加载更多评论按钮 -->
					<view v-if="hasMoreComments" class="load-more" @tap="loadMoreComments">
						<text>加载更多评论</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 评论输入框 -->
		<view class="comment-input-container">
			<view class="comment-input-wrapper">
				<input type="text" class="comment-input" v-model="commentContent" :placeholder="replyPlaceholder"
					:focus="inputFocus" @focus="onInputFocus" @blur="onInputBlur" confirm-type="send"
					@confirm="submitComment" />
				<view class="send-button" :class="{ 'active': commentContent.trim().length > 0 }" @tap="submitComment">
					<text>发送</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import titleBar from '@/components/titleBar.vue'
	import {
		userApi,
		dynamics
	} from '@/api/user.js'

	export default {
		components: {
			titleBar
		},
		data() {
			return {
				postId: null,
				postDetail: null,
				avatar: '',
				username: '',
				comments: [],
				commentContent: '',
				replyType: 'post', // 'post', 'comment', 'reply'
				currentCommentId: null,
				currentReplyId: null,
				replyToUsername: '',
				replyPlaceholder: '说点什么...',
				keyboardHeight: 0,
				page: 1,
				pageSize: 10,
				hasMoreComments: false,
				totalComments: 0,
				inputFocus: false
			}
		},
		mounted() {
			this.postId = getApp().globalData.currentArticleId;
			this.avatar = getApp().globalData.currentArticleAva
			this.username = getApp().globalData.currentArticleName
			this.fetchPostDetail();
			this.fetchComments();
			// uni.$off('articleId');
			// const self = this;
			// uni.$on('articleId', (data) => {
			// 	self.postId = getApp().globalData.currentArticleId;;
			// 	console.log(this.postId);
			// 	self.fetchPostDetail();
			// 	self.fetchComments();
			// })
		},
		methods: {
			// 获取帖子详情
			async fetchPostDetail() {
				try {
					uni.showLoading({
						title: '加载中...'
					});

					const result = await dynamics.getPostDetail({
						id: this.postId
					});
					this.postDetail = result;
					console.log(this.postDetail);

					uni.hideLoading();
				} catch (error) {
					uni.hideLoading();
					console.error('获取帖子详情失败：', error);
					uni.showToast({
						title: '获取帖子详情失败',
						icon: 'none'
					});
				}
			},

			// 获取一级评论列表
			async fetchComments() {
				try {
					const params = {
						articleId: this.postId,
						// page: this.page,
						// pageSize: this.pageSize
					};

					const result = await dynamics.getComments(params);
					this.comments = result;
					this.totalComments = result.length;
					this.hasMoreComments = this.comments.length < result.length;

					// 获取每个一级评论的二级评论
					for (let comment of this.comments) {
						this.fetchRepliesForComment(comment);
					}
				} catch (error) {
					console.error('获取评论失败：', error);
					uni.showToast({
						title: '获取评论失败',
						icon: 'none'
					});
				}
			},

			// 获取指定评论的回复
			async fetchRepliesForComment(comment) {
				try {
					const params = {
						commentId: comment.id,
						page: 1,
						pageSize: 5
					};

					const result = await dynamics.getCommentsSec(params);

					// 直接将二级评论设置为评论的属性
					this.$set(comment, 'replies', result);
					this.$set(comment, 'hasMoreReplies', result.length === 5); // 假设返回5条表示还有更多
					this.$set(comment, 'replyPage', 1);

				} catch (error) {
					console.error('获取二级评论失败：', error);
					// 设置空数组避免模板渲染错误
					this.$set(comment, 'replies', []);
				}
			},

			// 加载更多评论
			loadMoreComments() {
				this.page++;
				this.fetchComments();
			},

			// 加载更多回复
			async loadMoreReplies(comment) {
				try {
					const nextPage = (comment.replyPage || 1) + 1;
					const params = {
						commentId: comment.id,
						page: nextPage,
						pageSize: 5
					};

					const result = await dynamics.getCommentsSec(params);

					// 合并新加载的回复到现有回复列表
					if (result && result.length > 0) {
						comment.replies = [...comment.replies, ...result];
						comment.replyPage = nextPage;
						comment.hasMoreReplies = result.length === 5; // 假设返回5条表示还有更多

						// 强制视图更新
						this.comments = [...this.comments];
					} else {
						comment.hasMoreReplies = false;
					}
				} catch (error) {
					console.error('获取更多回复失败：', error);
					uni.showToast({
						title: '获取回复失败',
						icon: 'none'
					});
				}
			},

			// 回复评论
			replyToComment(comment) {
				this.replyType = 'comment';
				this.currentCommentId = comment.id;
				this.currentReplyId = null;
				this.replyToUsername = comment.username;
				this.replyPlaceholder = `回复 ${comment.username}：`;
				this.commentContent = '';

				// 聚焦输入框
				this.$nextTick(() => {
					this.inputFocus = true;
				});
			},

			// 取消回复
			cancelReply() {
				this.replyType = 'post';
				this.currentCommentId = null;
				this.currentReplyId = null;
				this.replyToUsername = '';
				this.replyPlaceholder = '说点什么...';
			},

			// 提交评论
			async submitComment() {
				if (this.commentContent.trim() === '') {
					return;
				}

				try {
					let result;

					if (this.replyType === 'post') {
						// 发布一级评论
						const params = {
							articleId: this.postId,
							content: this.commentContent.trim()
						};

						result = await dynamics.addComment(params);

						// 重新获取评论列表
						this.page = 1;
						this.fetchComments();

						// 更新帖子评论数
						if (this.postDetail) {
							this.postDetail.comments++;
						}
					} else if (this.replyType === 'comment' || this.replyType === 'reply') {
						// 发布二级评论（回复）
						const params = {
							commentId: this.currentCommentId,
							content: this.commentContent.trim(),
						};

						result = await dynamics.addReply(params);

						// 找到当前评论并更新回复列表
						const currentComment = this.comments.findIndex(c => c.id === this.currentCommentId);
						if (currentComment !== -1) {
							// 直接重新获取该评论的所有回复
							await this.fetchRepliesForComment(this.comments[currentComment]);
						}

						// 更新帖子评论数
						if (this.postDetail) {
							this.postDetail.comments++;
						}
					}

					this.commentContent = '';
					this.cancelReply();

					// uni.showToast({
					// 	title: '评论成功',
					// 	icon: 'success'
					// });
				} catch (error) {
					console.error('评论失败：', error);
					uni.showToast({
						title: '评论失败',
						icon: 'none'
					});
				}
			},

			// 点赞帖子
			async handleLike() {
				if (!this.postDetail) return;

				try {
					const action = this.postDetail.isLiked ? 'unlike' : 'like';
					const params = {
						postId: this.postId,
						action: action
					};

					await dynamics.likePost(params);

					// 更新点赞状态
					this.postDetail.isLiked = !this.postDetail.isLiked;
					this.postDetail.likes += this.postDetail.isLiked ? 1 : -1;
				} catch (error) {
					console.error('点赞失败：', error);
					uni.showToast({
						title: '操作失败',
						icon: 'none'
					});
				}
			},

			// 收藏帖子
			async handleCollect() {
				if (!this.postDetail) return;

				try {
					const action = this.postDetail.isCollected ? 'uncollect' : 'collect';
					const params = {
						postId: this.postId,
						action: action
					};

					await dynamics.collectPost(params);

					// 更新收藏状态
					this.postDetail.isCollected = !this.postDetail.isCollected;
					this.postDetail.collects += this.postDetail.isCollected ? 1 : -1;
				} catch (error) {
					console.error('收藏失败：', error);
					uni.showToast({
						title: '操作失败',
						icon: 'none'
					});
				}
			},

			// 分享帖子
			handleShare() {
				uni.showShareMenu({
					withShareTicket: true,
					menus: ['shareAppMessage', 'shareTimeline']
				});
			},

			// 点赞评论
			async likeComment(comment) {
				try {
					const action = comment.isLiked ? 'unlike' : 'like';
					const params = {
						commentId: comment.id,
						action: action
					};

					await dynamics.likeComment(params);

					// 更新点赞状态
					comment.isLiked = !comment.isLiked;
					comment.likes += comment.isLiked ? 1 : -1;

					// 强制视图更新
					this.comments = [...this.comments];
				} catch (error) {
					console.error('点赞评论失败：', error);
					uni.showToast({
						title: '操作失败',
						icon: 'none'
					});
				}
			},

			// 点赞回复
			async likeReply(comment, reply) {
				try {
					const action = reply.isLiked ? 'unlike' : 'like';
					const params = {
						replyId: reply.id,
						action: action
					};

					await dynamics.likeReply(params);

					// 更新点赞状态
					reply.isLiked = !reply.isLiked;
					reply.likes += reply.isLiked ? 1 : -1;

					// 强制视图更新
					this.comments = [...this.comments];
				} catch (error) {
					console.error('点赞回复失败：', error);
					uni.showToast({
						title: '操作失败',
						icon: 'none'
					});
				}
			},

			// 预览图片
			previewImage(index) {
				if (!this.postDetail || !this.postDetail.images) return;

				uni.previewImage({
					current: index,
					urls: this.postDetail.images
				});
			},

			// 输入框获取焦点
			onInputFocus(e) {
				this.keyboardHeight = e.detail.height || 0;
			},

			// 输入框失去焦点
			onInputBlur() {
				this.keyboardHeight = 0;
				this.inputFocus = false;

				// 如果输入框为空，则取消回复状态
				if (this.commentContent.trim() === '') {
					this.cancelReply();
				}
			},
			goShop() {
				uni.switchTab({
					url: '/pages/shop/shop'
				})
			},
			goIndex() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			goForum() {
				uni.switchTab({
					url: '/pages/forum/forum'
				})
			},
			goMine() {
				uni.switchTab({
					url: '/pages/mine/mine'
				})
			},
			goHealth() {
				uni.switchTab({
					url: '/pages/health/health'
				})
			},
			goShopCar() {
				uni.switchTab({
					url: '/pages/shop/shopCar'
				})
			},
		}
	}
</script>

<style scoped>
	.post-detail-container {
		background-color: #f4f4f4;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
	}

	/* 顶部导航栏样式 */
	.top-navbar {
		background-color: white;
		padding: 15px 0;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
	}

	.logo {
		display: flex;
		align-items: center;
	}

	.logo image {
		width: 60px;
		height: 60px;
		margin-right: 15px;
	}

	.logo .titleText {
		font-size: 24px;
		font-weight: bold;
		color: #000000;
	}

	.navbar-center {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.nav-categories {
		display: flex;
	}

	.nav-item {
		padding: 8px 15px;
		color: #000000;
		font-size: 20px;
		font-weight: bold;
		cursor: pointer;
		margin-right: 10px;
		border-radius: 5px;
		transition: all 0.3s;
	}

	.nav-item:hover {
		background-color: rgba(255, 255, 255, 0.2);
	}

	.search-container {
		display: flex;
		align-items: center;
		background-color: rgba(255, 255, 255, 0.8);
		border-radius: 50px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		max-width: 300px;
	}

	.search-container image {
		width: 20px;
		height: 20px;
		margin-left: 10px;
	}

	.search-input {
		flex: 1;
		border: none;
		outline: none;
		font-size: 15px;
		padding: 5px 5px;
		background-color: transparent;
	}

	.search-btn {
		background-color: #F9CB43;
		color: #fff;
		border: none;
		border-radius: 0 50px 50px 0;
		padding: 5px 15px;
		font-size: 14px;
		cursor: pointer;
	}

	.user-actions {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.action-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: 20px;
		cursor: pointer;
	}

	.action-item image {
		width: 24px;
		height: 24px;
	}

	.action-item .titleText {
		margin-top: 5px;
		color: #000000;
		font-size: 14px;
	}

	.main-content {
		display: flex;
		max-width: 1200px;
		margin: 0 auto;
		margin-top: 270rpx;
		padding: 20px;
		gap: 30px;
		flex: 1;
	}

	.post-content-container {
		background-color: #ffffff;
		padding: 30px;
		border-radius: 8px;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
		flex: 6;
		min-height: 70vh;
		height: fit-content;
	}

	.post-header {
		display: flex;
		align-items: center;
		margin-bottom: 25px;
		border-bottom: 1px solid #f2f2f2;
		padding-bottom: 20px;
	}

	.user-avatar {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		margin-right: 15px;
		object-fit: cover;
	}

	.user-info {
		display: flex;
		flex-direction: column;
	}

	.username {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 6px;
	}

	.post-time {
		font-size: 14px;
		color: #999;
	}

	.post-body {
		padding-top: 10px;
	}

	.post-title {
		font-size: 24px;
		font-weight: bold;
		margin-bottom: 20px;
		display: block;
		line-height: 1.4;
	}

	.post-content {
		font-size: 16px;
		line-height: 1.8;
		margin-bottom: 30px;
		display: block;
		color: #333;
	}

	.image-gallery {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		gap: 15px;
		margin: 25px 0;
	}

	.post-image {
		width: 100%;
		height: 200px;
		border-radius: 8px;
		object-fit: cover;
		cursor: pointer;
		transition: transform 0.3s ease;
	}

	.post-image:hover {
		transform: scale(1.02);
	}

	.post-interactions {
		display: flex;
		justify-content: flex-start;
		border-top: 1px solid #eee;
		padding-top: 20px;
		margin-top: 30px;
	}

	.interaction-item {
		display: flex;
		align-items: center;
		padding: 8px 20px;
		margin-right: 20px;
		cursor: pointer;
		transition: all 0.2s;
		border-radius: 20px;
	}

	.interaction-item:hover {
		background-color: #f9f9f9;
	}

	.icon {
		font-size: 20px;
		margin-right: 10px;
	}

	.icon.active {
		color: #F9CB43;
	}

	.count {
		font-size: 14px;
		color: #666;
	}

	.comments-section {
		background-color: #ffffff;
		padding: 25px;
		border-radius: 8px;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
		flex: 4;
		max-height: 80vh;
		overflow-y: auto;
		position: sticky;
		top: 20px;
	}

	.section-title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 20px;
		position: relative;
	}

	.title-text {
		position: relative;
		padding-left: 12px;
	}

	.title-text::before {
		content: '';
		position: absolute;
		left: 0;
		top: 4px;
		height: 18px;
		width: 4px;
		background-color: #F9CB43;
		border-radius: 2px;
	}

	.no-comments {
		text-align: center;
		color: #999;
		padding: 40px 0;
	}

	.comment-item {
		padding: 15px 0;
		border-bottom: 1px solid #eee;
	}

	.comment-header {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	.commenter-avatar {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		margin-right: 10px;
		object-fit: cover;
	}

	.commenter-info {
		display: flex;
		flex-direction: column;
	}

	.commenter-name {
		font-size: 15px;
		font-weight: bold;
		margin-bottom: 4px;
	}

	.comment-time {
		font-size: 12px;
		color: #999;
	}

	.comment-content {
		padding: 10px 0 10px 50px;
		font-size: 15px;
		line-height: 1.6;
		color: #333;
	}

	.comment-actions {
		display: flex;
		padding: 8px 0 8px 50px;
	}

	.comment-actions text {
		font-size: 13px;
		color: #999;
		margin-right: 20px;
		cursor: pointer;
	}

	.comment-actions .liked {
		color: #F9CB43;
	}

	.reply-list {
		margin: 10px 0 10px 50px;
		background-color: #f8f8f8;
		border-radius: 8px;
		padding: 10px 15px;
	}

	.reply-item {
		padding: 12px 0;
		border-bottom: 1px solid #eee;
	}

	.reply-item:last-child {
		border-bottom: none;
	}

	.reply-header {
		display: flex;
		align-items: center;
		margin-bottom: 8px;
	}

	.replier-avatar {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		margin-right: 10px;
		object-fit: cover;
	}

	.replier-info {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.replier-name-container {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.replier-name {
		font-size: 14px;
		font-weight: bold;
		margin-right: 5px;
	}

	.reply-to {
		font-size: 13px;
		color: #999;
		margin-right: 5px;
	}

	.reply-to-name {
		font-size: 14px;
		color: #666;
	}

	.reply-time {
		font-size: 12px;
		color: #999;
	}

	.reply-content {
		padding: 5px 0 5px 40px;
		font-size: 14px;
		line-height: 1.6;
		color: #333;
	}

	.more-replies {
		text-align: center;
		padding: 12px 0;
		font-size: 14px;
		color: #666;
		cursor: pointer;
		transition: color 0.2s;
	}

	.more-replies:hover {
		color: #F9CB43;
	}

	.load-more {
		text-align: center;
		padding: 15px 0;
		font-size: 14px;
		color: #666;
		cursor: pointer;
		margin: 10px 0;
		transition: color 0.2s;
	}

	.load-more:hover {
		color: #F9CB43;
	}

	.comment-input-container {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 15px 0;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
		z-index: 100;
	}

	.comment-input-wrapper {
		display: flex;
		align-items: center;
		max-width: 1200px;
		margin: 0 auto;
		padding: 0 20px;
	}

	.comment-input {
		flex: 1;
		background-color: #f4f4f4;
		border-radius: 20px;
		padding: 12px 20px;
		font-size: 14px;
		max-height: 100px;
		border: 1px solid #e0e0e0;
	}

	.comment-input:focus {
		outline: none;
		border-color: #F9CB43;
		box-shadow: 0 0 0 2px rgba(249, 203, 67, 0.2);
	}

	.send-button {
		width: 80px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		border-radius: 20px;
		background-color: #e0e0e0;
		color: #fff;
		margin-left: 15px;
		font-size: 14px;
		transition: all 0.3s;
		cursor: pointer;
	}

	.send-button.active {
		background-color: #F9CB43;
	}

	.send-button.active:hover {
		background-color: #eabd3a;
	}

	/* 响应式调整 */
	@media screen and (max-width: 1024px) {
		.main-content {
			flex-direction: column;
			padding: 15px;
		}

		.post-content-container,
		.comments-section {
			flex: none;
			width: 100%;
		}

		.comments-section {
			max-height: none;
			position: static;
		}
	}

	@media screen and (max-width: 768px) {
		.post-title {
			font-size: 20px;
		}

		.post-content {
			font-size: 15px;
		}

		.image-gallery {
			grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		}
	}
</style>